<template>
  <div>
    <my-header></my-header>
    <!-- 首页特有模块start -->
    <div class="wlh_container" style="margin: 0 auto; text-align: center">
      <!-- 大轮播图模块 -->
      <div class="banner">
        <router-link to="/hotel" class="linktoother1"></router-link>
        <router-link
          to="/vedioMeal"
          target="_blank"
          class="linktoother2"
        ></router-link>
        <el-carousel
          indicator-position="none"
          height="460px"
          loop
          :interval="5000"
        >
          <el-carousel-item v-for="item of banner_data" :key="item.id">
            <img :src="item.src" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 侧边栏导航 -->
      <div class="nav_side_monther w">
        <ul class="nav_side">
          <li>
            <div>
              <i><img src="img/wlh/icon1.png" alt="" /></i>
              <router-link to="/hotel">婚宴酒店</router-link>
            </div>
            <span>草坪/星级</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon2.png" alt="" /></i>
              <router-link to="/details">婚礼策划</router-link>
            </div>
            <span>室内/户外</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon3.png" alt="" /></i>
              <router-link to="/details">婚纱摄影</router-link>
            </div>
            <span>影楼/工作室</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon4.png" alt="" /></i>
              <router-link to="/details">婚礼司仪</router-link>
            </div>
            <span>煽情/海派</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon5.png" alt="" /></i>
              <router-link to="/details">婚纱礼服</router-link>
            </div>
            <span>高端定制</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon6.png" alt="" /></i>
              <router-link to="/details">婚礼摄影</router-link>
            </div>
            <span>纪实/双机位</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon7.png" alt="" /></i>
              <router-link to="/details">婚礼跟拍</router-link>
            </div>
            <span>婚礼mv/摇臂</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon8.png" alt="" /></i>
              <router-link to="/details">婚礼跟妆</router-link>
            </div>
            <span>韩式/中式</span>
          </li>
          <li>
            <div>
              <i><img src="img/wlh/icon9.png" alt="" /></i>
              <router-link to="/details">婚戒首饰</router-link>
            </div>
            <span>一价全包</span>
          </li>
        </ul>
      </div>
      <!-- 电子请帖-视频制作。。。四模块链接模块 -->
      <div class="w nav_poster">
        <ul>
          <li>
            <router-link to="/invCard" target="_blank">
              <div class="img1"></div>
              <p>电子请帖</p>
            </router-link>
          </li>
          <li>
            <router-link to="/vedioMeal" target="_blank">
              <div class="img2"></div>
              <p>视频制作</p>
            </router-link>
          </li>
          <li>
            <router-link to="/wrindex">
              <div class="img3"></div>
              <p>婚庆套餐</p>
            </router-link>
          </li>
          <li>
            <router-link to="/scontent/3061">
              <div class="img4"></div>
              <p>结婚流程清单</p>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 首页婚礼工具 -->
      <div class="w tools_area">
        <div class="tools_t">
          <div class="t_left">
            <div class="title">
              <p>结婚爱看</p>
              <p>结婚需要准备什么？结婚流程准备全套细节清单（送表格）</p>
            </div>
            <a href="#">
              <img
                class="r_20"
                src="https://qnm.hunliji.com/o_1dluf15lp8emfq118lg9gf1ciq9.png"
                alt=""
                width="251px"
                height="162px"
              />
              <p>结婚要准备什么，内有福利</p>
            </a>
            <a href="#">
              <img
                src="https://qnm.hunliji.com/o_1eftn39141n601ldg1j94v0s1o2q9.png"
                alt=""
                width="251px"
                height="162px"
              />
              <p>一文读懂结婚登记准备</p>
            </a>
          </div>
          <div class="t_center">
            <p>婚礼工具</p>
            <div>
              <a href="#">
                <img src="img/wlh/结婚工具/01.png" alt="加载失败" />
                <p>结婚吉日</p>
              </a>
              <a href="#">
                <img src="img/wlh/结婚工具/02.png" alt="加载失败" />
                <p>婚姻登记处</p>
              </a>
              <a href="#">
                <img src="img/wlh/结婚工具/01.png" alt="加载失败" />
                <p>结婚任务</p>
              </a>
              <a href="#">
                <img src="img/wlh/结婚工具/01.png" alt="加载失败" />
                <p>婚礼歌曲</p>
              </a>
              <a href="#">
                <img src="img/wlh/结婚工具/01.png" alt="加载失败" />
                <p>结婚流程</p>
              </a>
              <a href="#">
                <img src="img/wlh/结婚工具/01.png" alt="加载失败" />
                <p>婚礼现场</p>
              </a>
            </div>
          </div>
          <a href="inv_card.html">
            <div class="t_right"></div>
          </a>
        </div>
        <div class="tools_b">
          <ul>
            <li><span></span> 热门城市</li>
            <li>|</li>
            <li><a href="#">上海</a></li>
            <li><a href="#">济南</a></li>
            <li><a href="#">郑州</a></li>
            <li><a href="#">武汉</a></li>
            <li><a href="#">厦门</a></li>
            <li><a href="#">大连</a></li>
            <li><a href="#">长沙</a></li>
            <li><a href="#">重庆</a></li>
            <li><a href="#">合肥</a></li>
            <li><a href="#">三亚</a></li>
            <li><a href="#">丽江</a></li>
            <li><a href="#">北京</a></li>
            <li><a class="all_city" href="#">全部城市</a></li>
          </ul>
        </div>
      </div>
      <!-- 旅拍套餐推荐 -->
      <div class="travel_meal">
        <h1 class="title">旅拍套餐推荐</h1>
        <div class="w floor1">
          <div
            v-for="(item, i) of travel_meal_rec1"
            :key="i"
            @click="open_detail(item.meal_id)"
          >
            <div class="jiantou"></div>
            <div class="city_tab">{{ item.city_name }}</div>
            <img :src="item.index_pic" />
            <p>{{ item.title }}</p>
            <div class="price-store">
              <span class="price">¥{{ item.price }}</span>
              <span class="store"
                ><a href="#">{{ item.store_name }}</a></span
              >
            </div>
          </div>
        </div>
        <div class="w floor2">
          <div
            v-for="(item, i) of travel_meal_rec2"
            :key="i"
            @click="open_detail(item.meal_id)"
          >
            <img :src="item.index_pic" />
            <div class="store_tab">
              <h5>{{ item.title }}</h5>
              <p>{{ item.store_name }}</p>
              <span class="price">¥{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 热门旅拍城市 -->
      <div class="hot_city w">
        <h1 class="title">热门旅拍城市</h1>
        <div class="pic">
          <div class="left">
            <router-link to="hotcity?rid=2">
              <div class="mask">
                <div class="city-name">大理</div>
                <div class="city-underline"></div>
                <div class="city-discription">东方瑞士</div>
              </div>
            </router-link>
          </div>
          <div class="center">
            <div
              style="
                background-image: url(https://qnm.hunliji.com/o_1d5qfm5hu1jqa1vbmkrb4fldeq17r.jpg?imageView2/1/w/952/h/712);
              "
            >
              <router-link to="hotcity?rid=1">
                <div class="mask">
                  <div class="city-name">日本</div>
                  <div class="city-underline"></div>
                  <div class="city-discription">赏樱圣地</div>
                </div>
              </router-link>
            </div>
            <div
              style="
                background-image: url(https://qnm.hunliji.com/o_1d5qurfn7co49mb1fkujt3j4ub0.jpg);
              "
            >
              <router-link to="hotcity?rid=3">
                <div class="mask">
                  <div class="city-name">马尔代夫</div>
                  <div class="city-underline"></div>
                  <div class="city-discription">纯净的海岛风光</div>
                </div>
              </router-link>
            </div>
            <div
              style="
                background-image: url(https://qnm.hunliji.com/o_1d5lcnqh14181t70qhchcg1ms02j1.jpg);
              "
            >
              <router-link to="hotcity?rid=4">
                <div class="mask">
                  <div class="city-name">巴厘岛</div>
                  <div class="city-underline"></div>
                  <div class="city-discription">天堂之岛</div>
                </div>
              </router-link>
            </div>
            <div
              style="
                background-image: url(http://qnm.hunliji.com/o_1d60aps7t16an16mp1gdt1hal1im17.jpg?imageView2/2/w/640);
              "
            >
              <router-link to="hotcity?rid=5">
                <div class="mask">
                  <div class="city-name">日本</div>
                  <div class="city-underline"></div>
                  <div class="city-discription">东方夏威夷</div>
                </div>
              </router-link>
            </div>
            <div
              style="
                background-image: url(https://qnm.hunliji.com/o_1d5qvmktv13sc15aq120q4bk13hv9a.jpg?imageView2/1/w/952/h/712);
              "
            >
              <router-link to="hotcity?rid=1">
                <div class="mask">
                  <div class="city-name">马尔代夫</div>
                  <div class="city-underline"></div>
                  <div class="city-discription">天堂之岛</div>
                </div>
              </router-link>
            </div>
            <div
              style="
                background-image: url(https://qnm.hunliji.com/o_1d5lckqtg14hpe4u1jn91s0bge2gp.jpg);
              "
            >
              <router-link to="hotcity?rid=2">
                <div class="mask">
                  <div class="city-name">巴厘岛</div>
                  <div class="city-underline"></div>
                  <div class="city-discription">天堂之岛</div>
                </div>
              </router-link>
            </div>
          </div>
          <div class="right">
            <router-link to="hotcity?rid=3">
              <div class="mask">
                <div class="city-name">三亚</div>
                <div class="city-underline"></div>
                <div class="city-discription">东方夏威夷</div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="more">
          <a href="#">更多旅拍优惠 <span></span></a>
        </div>
      </div>
      <!-- 婚礼策划案例模块（包含轮播图） -->
      <div class="wlh_container_case">
        <h1 class="title">婚礼策划案例</h1>
        <!-- 动态轮播图 -->
        <div
          class="swipers_wlh_container"
          :class="currentItem <= 4 ? 'transition' : ''"
          :style="`margin-left:${currentMleft}`"
        >
          <!-- 轮播项目 -->
          <ul class="slider_list">
            <li
              class="slider_item"
              v-for="(item, i) of bannerList"
              :key="i"
              :class="--i == currentItem ? 'flag_me' : ''"
            >
              <a href="#">
                <img :src="item.pic_src" />
              </a>
              <div class="other_msg">
                <div class="Mtitle">{{ item.title }}</div>
                <div class="sub_title">
                  <div class="sub_title_item">{{ item.sub_title }}</div>
                  <div class="shoucang_item">收藏 {{ item.cangNum }}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 轮播指示器 -->
        <ul class="indicators">
          <li :class="currentItem == 0 ? 'active' : ''"></li>
          <li :class="currentItem == 1 ? 'active' : ''"></li>
          <li :class="currentItem == 2 ? 'active' : ''"></li>
          <li :class="currentItem == 3 ? 'active' : ''"></li>
          <li :class="currentItem == 4 ? 'active' : ''"></li>
        </ul>
        <div class="w">
          <div class="more">
            <a href="#">更多案例 <span></span></a>
          </div>
        </div>
        <div class="merchant-more-btn-text w">
          提供热门婚庆公司的婚庆套餐报价及婚礼策划案例欣赏
        </div>
      </div>
      <!-- 结婚流程模块 -->
      <div class="process">
        <h1 class="title w">结婚流程</h1>
        <div class="contain w">
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚礼策划</em>
            <p>提前预订婚宴酒店</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚纱摄影</em>
            <p>婚纱照要怎么拍</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚礼摄影</em>
            <p>婚庆不花冤枉钱</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚纱礼服</em>
            <p>婚纱礼服租还是买</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚礼跟妆</em>
            <p>结婚请帖怎么写</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚礼跟拍</em>
            <p>品牌婚车租赁价格</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚礼司仪</em>
            <p>结婚用品准备大全</p>
          </router-link>
          <router-link to="details">
            <span>
              <i></i>
            </span>
            <em>婚戒首饰</em>
            <p>婚礼现场注意事项</p>
          </router-link>
        </div>
      </div>
      <!-- 婚宴酒店热门城市模块 -->
      <div class="hot_city1">
        <h1 class="title w">婚宴酒店热门城市</h1>
        <div class="city_list w">
          <router-link to="/detail/5">
            <div class="jiantou"></div>
            <img
              src="https://qnm.hunliji.com/o_1crrouqr4l50qrf1ebt1ak01530e.png"
              alt=""
            />
            <div class="city_name">杭州</div>
          </router-link>
          <router-link to="/detail/5">
            <div class="jiantou"></div>
            <img
              src="https://qnm.hunliji.com/o_1crrouqr41a9n1hu72l9ava1ef7f.png"
              alt=""
            />
            <div class="city_name">上海</div>
          </router-link>
          <router-link to="/detail/5">
            <div class="jiantou"></div>
            <img
              src="https://qnm.hunliji.com/o_1crrouqr4v9u1mde1bhhl9u2n0h.png"
              alt=""
            />
            <div class="city_name">南京</div>
          </router-link>
          <router-link to="/detail/5">
            <div class="jiantou"></div>
            <img
              src="https://qnm.hunliji.com/o_1crrouqr41ilc1pot1e9jttabk1d.png"
              alt=""
            />
            <div class="city_name">北京</div>
          </router-link>
          <router-link to="/detail/5">
            <div class="jiantou"></div>
            <img
              src="https://qnm.hunliji.com/o_1crrouqr41omp1kt5d704tcioqg.png"
              alt=""
            />
            <div class="city_name">深圳</div>
          </router-link>
        </div>
        <div class="tools_b w">
          <ul>
            <li><span></span> 热门城市</li>
            <li>|</li>
            <li><a href="#">上海</a></li>
            <li><a href="#">济南</a></li>
            <li><a href="#">郑州</a></li>
            <li><a href="#">武汉</a></li>
            <li><a href="#">厦门</a></li>
            <li><a href="#">大连</a></li>
            <li><a href="#">长沙</a></li>
            <li><a href="#">重庆</a></li>
            <li><a href="#">合肥</a></li>
            <li><a href="#">三亚</a></li>
            <li><a href="#">丽江</a></li>
            <li><a href="#">北京</a></li>
            <li><a class="all_city" href="#">全部城市</a></li>
          </ul>
        </div>
      </div>
      <!-- 结婚用品 -->
      <div class="supplies">
        <h1 class="title w">结婚用品</h1>
        <div class="supplies_bar w">
          <router-link to="/shoppingindex">接亲婚宴</router-link>/
          <router-link to="/shoppingindex">婚庆床品</router-link>/
          <router-link to="/shoppingindex">新娘嫁妆</router-link>/
          <router-link to="/shoppingindex">新娘穿搭</router-link>/
          <router-link to="/shoppingindex">结婚酒水</router-link>
        </div>
        <div class="supplies_list w">
          <div class="list_item">
            <img
              src="https://qnm.hunliji.com/o_1cs3fkjsc1h3615fo1okk8hc2d.png?imageView2/1/w/570/h/570"
              alt=""
            />
            <div class="panel">
              <p>新娘礼服</p>
              <div class="red_line"></div>
              <div class="panel_list">
                <router-link to="/shoppingindex">婚纱</router-link>/
                <router-link to="/shoppingindex">秀禾服</router-link>/
                <router-link to="/shoppingindex">敬酒服</router-link>
              </div>
            </div>
          </div>
          <div class="list_item">
            <img
              src="https://qnm.hunliji.com/o_1cs3fkjsc355qjtaaj152t1d51c.png?imageView2/1/w/570/h/570"
              alt=""
            />
            <div class="panel">
              <p>新娘礼服</p>
              <div class="red_line"></div>
              <div class="panel_list">
                <router-link to="/shoppingindex">婚纱</router-link>/
                <router-link to="/shoppingindex">秀禾服</router-link>/
                <router-link to="/shoppingindex">敬酒服</router-link>
              </div>
            </div>
          </div>
          <div class="list_item">
            <img
              src="https://qnm.hunliji.com/o_1cs3fkjsc1qvrqfb137j1fbu8p1f.png?imageView2/1/w/570/h/570"
              alt=""
            />
            <div class="panel">
              <p>新娘礼服</p>
              <div class="red_line"></div>
              <div class="panel_list">
                <router-link to="/shoppingindex">婚纱</router-link>/
                <router-link to="/shoppingindex">秀禾服</router-link>/
                <router-link to="/shoppingindex">敬酒服</router-link>
              </div>
            </div>
          </div>
          <div class="list_item">
            <img
              src="https://qnm.hunliji.com/o_1cs3fkjscch411bfbq3bol1f7me.png?imageView2/1/w/570/h/570"
              alt=""
            />
            <div class="panel">
              <p>新娘礼服</p>
              <div class="red_line"></div>
              <div class="panel_list">
                <router-link to="/shoppingindex">婚纱</router-link>/
                <router-link to="/shoppingindex">秀禾服</router-link>/
                <router-link to="/shoppingindex">敬酒服</router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="w">
          <div class="more">
            <router-link to="/shoppingindex"
              >更多婚品 <span></span></router-link
            >
          </div>
        </div>
      </div>
      <!-- 结婚美图 -->
      <div class="wed_pic">
        <h1 class="title w">结婚美图</h1>
        <div class="photos w">
          <!-- 第一层 -->
          <div class="floor_1">
            <div class="left">
              <router-link to="/picturedetails/0/3">
                <img
                  src="http://qnm.hunliji.com/o_1b1o3is9r25i19glt8i7q63i91o.jpg?imageView2/1/w/1320/h/1020"
                  alt=""
                />
              </router-link>
            </div>
            <div class="right">
              <router-link to="/picture/2/1">
                <img
                  src="http://qnm.hunliji.com/E76F3B23830139A175F3959D550455C2?imageView2/1/w/660/h/660"
                  alt=""
                />
              </router-link>
              <div class="info">
                <router-link to="/picture/2/1">水下婚纱照</router-link>
                <p>提供水下婚纱照图片，水下婚纱照效果图欣赏</p>
                <router-link to="/picture/2/1">
                  <div class="jiantou"></div>
                </router-link>
                <div class="left_point"></div>
              </div>
            </div>
          </div>
          <!-- 第二层 -->
          <div class="floor_2">
            <router-link to="/picture/0/1">韩式婚纱照</router-link>
            <router-link to="/picture/0/1">
              <img
                src="http://qnm.hunliji.com/o_1b1o3a6bagt31uvf1n8v1ktgur1i.jpg?imageView2/1/w/660/h/660"
                alt=""
              />
              <div class="right_point"></div>
            </router-link>
            <router-link to="/picturedetails/1/27">唯美婚纱照</router-link>
            <router-link to="/picturedetails/1/27">
              <img
                src="http://qnm.hunliji.com/9C97157D9F287038630D00D62161A083?imageView2/1/w/660/h/660"
                alt=""
              />
              <div class="right_point"></div>
            </router-link>
          </div>
          <!-- 第三层 -->
          <div class="floor_3">
            <div class="left">
              <div class="top">
                <router-link to="/picture/1/1">小清新婚礼布置</router-link>
                <p>
                  小清新婚礼布置是时下最流新的婚礼布置，无论是室内还是室外都可以营造出一种清新浪漫的婚礼氛围，深受新人们的喜爱！
                </p>
                <router-link to="/picture/1/1">
                  <div class="jiantou"></div>
                </router-link>
              </div>
              <div class="bot">
                <ul>
                  <li>热门标签</li>
                  <li>|</li>
                  <li>
                    <router-link to="/picturelabel/1/8"
                      >古风婚纱照 中式古风婚纱照图片</router-link
                    >
                  </li>
                  <li>
                    <router-link to="/picturelabel/0/2"
                      >古风婚礼图片 中式婚礼图集</router-link
                    >
                  </li>
                  <li>
                    <router-link to="/picturelabel/1/11"
                      >美甲图片款式大全</router-link
                    >
                  </li>
                </ul>
              </div>
            </div>
            <div class="right">
              <router-link to="/picture">
                <img
                  src="https://qnm.hunliji.com/20A618CC2F17352630670EA222E6BA5F.jpg?imageView2/1/w/772/h/486"
                  alt=""
                />
              </router-link>
            </div>
          </div>
          <div class="w">
            <div class="more">
              <router-link to="/picture">更多美图 <span></span></router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 结婚百科 -->
      <div class="baike">
        <h1 class="title w">结婚百科</h1>
        <div class="baike-area w">
          <div class="baike-empty">
            <div class="baike-header">
              <div class="baike-header-title">
                <img src="img/wlh/结婚攻略/01.png" alt="" />
                <router-link to="/strategyindex">结婚攻略</router-link>
              </div>
              <div class="baike-header-bar">
                <router-link to="/list/结婚登记">结婚登记</router-link>/
                <router-link to="/list/婚前准备">婚前准备</router-link>/ 
                <router-link to="/list/结婚祝福">结婚祝福</router-link>/
                <router-link to="/list/结婚邀请">结婚邀请</router-link>
              </div>
            </div>
            <div class="baike-body">
              <router-link :to="`/scontent/${stra.yid}`" v-for="(stra,s) in strategy.slice(0,5)" :key="s">
                <p>{{stra.title}}</p>
                <p>浏览 {{stra.scan}}</p>
              </router-link>
              <router-link to="/strategyindex">
                <div class="jiantou"></div>
              </router-link>
            </div>
          </div>
          <div class="baike-empty">
            <div class="baike-header">
              <div class="baike-header-title">
                <img src="img/wlh/结婚攻略/01.png" alt="" />
                <router-link to="/strategyindex">婚庆指南</router-link>
              </div>
              <div class="baike-header-bar">
                <router-link to="/list/结婚流程">结婚流程</router-link>/ 
                <router-link to="/list/拍婚纱照">拍婚纱照</router-link>/
                <router-link to="/list/婚礼跟妆">婚礼跟妆</router-link>/
                <router-link to="/list/婚礼现场">婚礼现场</router-link>
              </div>
            </div>
            <div class="baike-body">
              <router-link :to="`/scontent/${stra.yid}`" v-for="(stra,s) in strategy.slice(5,10)" :key="s">
                <p>{{stra.title}}</p>
                <p>浏览 {{stra.scan}}</p>
              </router-link>
              <router-link to="/strategyindex">
                <div class="jiantou"></div>
              </router-link>
            </div>
          </div>
          <div class="baike-empty">
            <div class="baike-header">
              <div class="baike-header-title">
                <img src="img/wlh/结婚攻略/01.png" alt="" />
                <router-link to="/strategyindex">结婚用品</router-link>
              </div>
              <div class="baike-header-bar">
                <router-link to="/list/珠宝首饰">珠宝首饰</router-link>/ 
                <router-link to="/list/婚纱礼服">婚纱礼服</router-link>/
                <router-link to="/list/礼物">礼物</router-link>/
                <router-link to="/list/婚房用品">婚房用品</router-link>
              </div>
            </div>
            <div class="baike-body">
              <router-link :to="`/scontent/${stra.yid}`" v-for="(stra,s) in strategy.slice(10,15)" :key="s">
                <p>{{stra.title}}</p>
                <p>浏览 {{stra.scan}}</p>
              </router-link>
              <router-link to="/strategyindex">
                <div class="jiantou"></div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 首页特有模块end -->
    <!-- 首页特有模块end -->
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  // 监视轮播项的变化一变化就重新计算margin-left重新绘制页面实现轮播
  watch: {
    currentItem() {
      let num = this.currentItem;
      this.currentMleft = -450 * num + "px";
    },
  },
  data() {
    return {
      // banner_data存放轮播图链接数据
      banner_data: [
        {
          id: 1,
          src:
            "https://qnm.hunliji.com/o_1dstu9re0rl693hh2di1f5lt9.jpg?imageView1/1/w/2560/h/460",
        },
        {
          id: 2,
          src:
            "https://qnm.hunliji.com/o_1eea2f80414u2u6l2fnlc9a819.jpg?imageView1/1/w/2560/h/460",
        },
        {
          id: 3,
          src:
            "https://qnm.hunliji.com/o_1dstu9re0rl693hh2di1f5lt9.jpg?imageView1/1/w/2560/h/460",
        },
        {
          id: 4,
          src:
            "https://qnm.hunliji.com/o_1eea2f80414u2u6l2fnlc9a819.jpg?imageView1/1/w/2560/h/460",
        },
      ],
      // 旅拍套餐推荐信息数组
      travel_meal_rec1: [],
      travel_meal_rec2: [],
      // 花样轮播图数组-婚礼策划案例
      bannerList: [
        {
          pic_src:
            "http://qnm.hunliji.com/17FBD19F29BD1FF1C4B82F6A10A942FE?imageView2/1/w/880/h/550",
          title: "海棠湾索菲特酒店草坪婚礼",
          sub_title: "三亚密语薇婷婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "https://qnm.hunliji.com/A9DB23CFCB3572C0BDD0EC40EA9BDF58.jpg?imageView2/1/w/880/h/550",
          title: "浪漫烛光晚餐-温馨婚礼晚宴",
          sub_title: "三亚缘鼎婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "http://qnm.hunliji.com/926CC0B875F80A45765BF826DBB37650.jpg?imageView2/1/w/880/h/550",
          title: "【缘鼎婚礼】三亚求婚活动-浪漫星空，空中停机坪",
          sub_title: "三亚缘鼎婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "http://qnm.hunliji.com/7D776DE2921D5DDB769849337366FDC6?imageView2/1/w/880/h/550",
          title: "海棠湾索菲特酒店草坪婚礼",
          sub_title: "三亚密语薇婷婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "https://qnm.hunliji.com/0073A4CAF4C328987671A7CF6E4024F4.jpg?imageView2/1/w/880/h/550",
          title: "海棠湾索菲特酒店草坪婚礼",
          sub_title: "三亚密语薇婷婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "http://qnm.hunliji.com/17FBD19F29BD1FF1C4B82F6A10A942FE?imageView2/1/w/880/h/550",
          title: "海棠湾索菲特酒店草坪婚礼",
          sub_title: "三亚密语薇婷婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "https://qnm.hunliji.com/A9DB23CFCB3572C0BDD0EC40EA9BDF58.jpg?imageView2/1/w/880/h/550",
          title: "浪漫烛光晚餐-温馨婚礼晚宴",
          sub_title: "三亚缘鼎婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "http://qnm.hunliji.com/926CC0B875F80A45765BF826DBB37650.jpg?imageView2/1/w/880/h/550",
          title: "【缘鼎婚礼】三亚求婚活动-浪漫星空，空中停机坪",
          sub_title: "三亚缘鼎婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "http://qnm.hunliji.com/7D776DE2921D5DDB769849337366FDC6?imageView2/1/w/880/h/550",
          title: "海棠湾索菲特酒店草坪婚礼",
          sub_title: "三亚密语薇婷婚礼策划",
          cangNum: 100,
        },
        {
          pic_src:
            "https://qnm.hunliji.com/0073A4CAF4C328987671A7CF6E4024F4.jpg?imageView2/1/w/880/h/550",
          title: "海棠湾索菲特酒店草坪婚礼",
          sub_title: "三亚密语薇婷婚礼策划",
          cangNum: 100,
        },
      ],
      // 当前播放的第几个轮播项目 0-7共计八个
      currentItem: 1,
      currentMleft: "-450px",
      // 结婚百科文章数组
      strategy: [],
    };
  },
  methods: {
    moveTo() {
      let n = this.currentItem;
      if (n < 4) {
        this.currentItem++;
      } else {
        this.currentItem = 0;
        this.currentMleft = 0;
      }
    },
    open_detail(meal_id) {
      window.open(`#/photo_meal/${meal_id}`, "_blank");
    },
    // 请求位置信息的方法
    getLocation() {
      let geolocation = window.navigator.geolocation;
      geolocation.getCurrentPosition((result) => {
        console.log(result.coords);
        let long = result.coords.longitude;
        let lat = result.coords.latitude;
        console.log(long, lat);
        // 创建点坐标
        let point = new BMap.Point(long, lat);
        let geoc = new BMap.Geocoder();
        geoc.getLocation(point, (res) => {
          console.log(res.addressComponents.city);
          let city = res.addressComponents.city;
          // 将vuex中的当前城市改为获取得地址
          this.$store.state.city_name = city;
        });
      });
    },

    // 请求结婚百科文章内容
    getStrategy() {
      this.axios.get("/strategy/titleimg").then((res) => {
        this.strategy = res.data;
      });
    },
  },
  mounted() {
    // 请求首页旅拍套餐推荐
    this.axios.get("/travel/showall").then((res) => {
      // 截取请求结果的前三个给到数组
      this.travel_meal_rec1 = res.data.slice(0, 3);
      this.travel_meal_rec2 = res.data.slice(3, 7);
    });

    // 页面刷新及获取位置
    this.getLocation();

    // 启动一个定时器轮播花样轮播图项目
    let time = setInterval(() => {
      this.moveTo();
    }, 2000);
    // 请求结婚百科文章内容
    this.getStrategy();
  },
};
</script>
<style scoped>
@import url(/css/index.css);
</style>